<template>
	<view class="empower-container colCen borderBox">
		<view class="txt-tit wd100 rowCenBet">
			<view class="closeIcon"></view>
			<view class="modelTit">请补充微信头像和昵称</view>
		</view>
		<view class="txt-tit wd100 rowCenCen" style="margin-top: 20rpx;">
			<view class="subTit">以便后续为您提供完整的售后服务保障 </view>
		</view>
		
		<view class="inputBar rowCen wd100" style="margin-top: 40rpx;">
			<view class="labelArea">
				<text style="color: red;margin-right:10rpx;">*</text>
				微信昵称
			</view>
			<input type="nickname" class="minput"  @blur="bindblur" placeholder="请输入昵称" @input="bindinput" :value="userInfo.nickName" >
		</view>
		<view class="inputBar rowCenBet wd100" >
			<view class="labelArea">
				<text style="color: red;margin-right:10rpx;">*</text>
				&nbsp;&nbsp;微信头像
			</view>
			
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			
				<view class="avator rowCen">
					<image class="touxpic" :src="userInfo.avatar" mode=""></image>
				</view>
			</button>
			
			
			
		</view>


		<view class="btn-container rowCenCen wd100"  @tap="confirm()">
			<view class="confirm-btn wd100 rowCenCen">
				<view>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/utils/util.js'
	export default {
		props:{
			content:String
		},
		data() {
			return {
				avapic: '',
				userInfo:[]
			}
		},
		async mounted() {
			//this.logo = getApp().globalData.appBaseInfo.wxAppLogo
			this.userInfo = uni.getStorageSync('userInfo')
			let token = uni.getStorageSync('loginInfo')
			if(token || this.userInfo){
				this.userInfo = await common.getUserInfo()  
			}
			
		},
		methods: {
			bindblur(e) {
				// 获取微信昵称
				console.log('nickName', e)
				this.userInfo.nickName = e.detail.value;
				this.updataInfo()
			},
			bindinput(e) {
				console.log('nickName', e)
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				this.userInfo.nickName = e.detail.value;
				this.updataInfo()
			},
			onChooseavatar(e) {
				this.userInfo.avatar = e.detail.avatarUrl;
				this.upload()
			},
			async upload() {
				let file = await this.$http.upload('/common/sysFile/upload', this.userInfo.avatar,
					true);
				let res = await this.$http.post({
					url: '/kdb/member/updateUserInfo',
					data: {
						avatar: file.data
					}
				})
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.userInfo = await common.getUserInfo()  
				} 
			},
			// 修改个人信息
			async updataInfo() {
				let res = await this.$http.post({
					url: '/kdb/member/updateUserInfo',
					data: this.userInfo,
				});
					
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.userInfo = await common.getUserInfo()  
				} 
			},
			async confirm() {
				this.close()
			},
			close() {
				this.$emit('closemodel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empower-container {
		width: 586rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;

		.txt-tit {
			margin-top: 6rpx;
			.closeIcon{
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.modelTit{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
		}
		.subTit{
			font-size: 30rpx;
			font-weight: 500;
			color: #666666;
		}
		
		.inputBar{
			height: 100rpx;
			.labelArea{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
			}
			.minput{
				flex: 1;
				text-align: right;
			}
		}

		.touxpic {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			overflow: hidden;
		}


		.btn-container {
			margin-top: 30rpx;
			.confirm-btn{
				height: 100rpx;
				background: #09C15F;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	
	button::after {
		border: none;
	}
	button {
		background: #fff;
		margin: 0;
		padding: 0;
		 display: flex;
		justify-content: center;
		align-items: center;
	}  
</style>